<template>
  <div class="season-info">
    <div class="season-data">
      <div class="match-event">
        <span>比赛事件</span>
      </div>
      <div class="progress-box">
        <div class="battle-teams">
          <img :src="battleTeam.homeTeamImg" alt="" />
          <span>VS</span>
          <img :src="battleTeam.awayTeamImg" alt="" />
        </div>
        <MatchProcess :matchProcess="matchProcess" />
      </div>
    </div>
    <div class="career-data">
      <div class="match-event">
        <span>交锋记录</span>
        <div class="selector-season">
          <el-select
            v-model="season"
            @focus="setMinWidthEmpty"
            style="width:150px"
            placeholder="请选择赛季"
          >
            <el-option
              v-for="item in options"
              :key="item.season"
              :label="item.label"
              :value="item.season"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="career-league">
        <BattleRecord :battleRecord="battleRecord" :season="season" />
      </div>
    </div>
  </div>
</template>

<script>
import MatchProcess from "./MatchProcess";
import BattleRecord from "./BattleRecord";
import mixin from "../../../../mixin/mixin";
import axios from "axios";
export default {
  name: "MatchInfo",
  mixins: [mixin],
  components: {
    BattleRecord,
    MatchProcess,
  },
  data() {
    return {
      season: "2019赛季",
      options: [
        {
          season: "2019赛季",
          label: "2019赛季",
        },
        {
          season: "2018赛季",
          label: "2018赛季",
        },
        {
          season: "2017赛季",
          label: "2017赛季",
        },
        {
          season: "2016赛季",
          label: "2016赛季",
        },
      ],
      // battleTeam:this.$store.state.battleTeam,
      matchProcess: {},
      battleRecord: [],
    };
  },
  methods: {
    async getMatchInfo(matchId) {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/matches/matchInfor/${matchId}`
      );
      console.log("getMatchInfo方法被调用");
      // this.battleTeam = data.battleTeam;
      this.matchProcess = data.matchProcess;
      this.battleRecord = data.battleRecord;
    },
  },
  computed: {
    battleTeam() {
      return this.$store.state.battleTeam;
    },
  },
  created() {
    console.log("Info_created");
    // const matchId = this.$route.params.matchId;
    // this.getMatchInfo(matchId)
  },
  beforeRouteEnter(to, from, next) {
    // console.log('from:',from);
    // console.log('to:',to);
    const fromMatchId = from.params.matchId || null;
    const toMatchId = to.params.matchId;

    if (fromMatchId === toMatchId) {
      console.log("matchInfo来回跳转:");
      next();
    } else {
      console.log("MatchInfo_beforeRouteEnter首次触发:", toMatchId);
      next((vm) => {
        vm.getMatchInfo(toMatchId);
      });
    }
  },
  // beforeRouteUpdate(to, from, next){
  //   const {matchId} = to.params;
  //   console.log('Info_beforeRouteUpdate:',matchId);
  //   this.getMatchInfo(matchId);
  //   next()
  // }
};
</script>

<style scoped>
.season-info {
  width: 1440px;
  height: 910px;
  margin: 30px auto 0;
  /*background-color: red;*/
}
.season-data {
  width: 1440px;
  height: 250px;
  background-color: #f1f6f9;
}
.progress-box {
  width: 100%;
  height: 200px;
  /*background-color: #55a532;*/
  display: flex;
}
.battle-teams {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 10%;
  height: 200px;
  /*background-color: brown;*/
}
.battle-teams > img {
  width: 70px;
  height: 70px;
}
.battle-teams > span {
  font-size: 30px;
  color: #16c79a;
  font-weight: bold;
}
.career-data {
  width: 1440px;
  margin-top: 10px;
  height: 30%;
  /*background-color: #F1F6F9;*/
}
.match-event {
  width: 100%;
  height: 50px;
  color: #16c79a;
  font-weight: bold;
  font-size: 28px;
  line-height: 50px;
  background-color: #194568;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.match-event > span {
  margin-left: 30px;
}
.career-league {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: #f1f6f9;
}
.selector-season /deep/ .el-input {
  width: 80%;
}
.selector-season /deep/ .el-input__inner {
  height: 30px;
}
.selector-season /deep/ .el-input__suffix {
  top: 6px;
}
</style>
